<script setup>
import MerchantPacket from "./components/MerchantPacket.vue";
import StorePacket from "./components/StorePacket.vue";
import OperatingBrand from "./components/OperatingBrand.vue";
import { nextTick, ref } from "vue";
const merchantPacketRef = ref();
const storePacketRef = ref();
const operatingBrandRef = ref();
const activeName = ref("商户分组");
const tablist = ref([
  { id: 1, name: "商户分组", component: "MerchantPacket" },
  { id: 2, name: "门店分组", component: "StorePacket" },
  { id: 3, name: "经营品牌", component: "OperatingBrand" },
]);
</script>
<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane
      v-for="item in tablist"
      :key="item.id"
      :label="item.name"
      :name="item.name"
    >
      <!-- 商户分组 -->
      <MerchantPacket
        ref="merchantPacketRef"
        v-if="item.component == 'MerchantPacket' && activeName == '商户分组'"
      ></MerchantPacket>
      <!-- 门店分组 -->
      <StorePacket
        ref="storePacketRef"
        v-if="item.component == 'StorePacket' && activeName == '门店分组'"
      ></StorePacket>
      <!-- 经营品牌 -->
      <OperatingBrand
        ref="operatingBrandRef"
        v-if="item.component == 'OperatingBrand' && activeName == '经营品牌'"
      ></OperatingBrand>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="less" scoped>
.demo-tabs {
  height: 100%;
  :deep(.el-tabs__content) {
    height: calc(100% - 40px);
  }
  :deep(.el-tab-pane) {
    height: 100%;
  }
  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }
  :deep(.el-tabs__item.is-active) {
    color: var(--el-color-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
  }
}
</style>
